import React from 'react';
import { 
  StyleSheet,
  Image,
  Text,
  TouchableOpacity, 
  ScrollView,
  FlatList,
  View,
  DeviceEventEmitter
} from 'react-native';
import { Icon } from 'react-native-vector-icons';
import { Tree } from 'react-native-tree';
import { inject, observer } from 'mobx-react';
import { withNavigationFocus } from "react-navigation";

@inject((stores) => {
    return {
        loginStore: stores.rootStore.loginStore,
        inviteStore: stores.rootStore.inviteStore 
    }
})
@observer class InvitationScreen extends React.Component {
    static navigationOptions = {
        header: null,
        headerBackTitle: '返回'
    };
    constructor(props){
		super(props);
        this.state = { 
            expandedKeys:[]
        }
	}
    componentDidUpdate(prevProps) {
		if (prevProps.isFocused !== this.props.isFocused && this.props.isFocused) {
		  // Use the `this.props.isFocused` boolean
		  // Call any action
		  //重新获得焦点
		  this._getData();
		}
	}
    componentDidMount() {
		this._getData();
		this.subscription = DeviceEventEmitter.addListener('Invitation', this.refreshData)
    }
    componentWillUnmount() {
        DeviceEventEmitter.emit('Home', {id: 1})
		this.subscription.remove();
	};
	refreshData = () => {
		this._getData();
    }
    _getData = () => {
        storage.load({ key: 'token' }).then((ret) => {
			if (ret) {
				this.props.inviteStore.getInviteTreeData({});
			}else{
				this.props.navigation.navigate('Login')
			}
		}).catch(() => {
			this.props.navigation.navigate('Login') 
		});
    }
    /**
     * 邀请
     */
    _goInvite = () => {
        this.props.navigation.navigate('Invite');
    }
    /**
     * 树形节点展开
     */
    _onExpand = (value) => {
        this.setState({expandedKeys: value}) 
    }
    /**
     * 树形节点点击
     */
    _onSelect = (value) => {
        const index = this.state.expandedKeys.indexOf(value[0]) 
        let keys = this.state.expandedKeys;
        if( index >= 0 ){
            keys.splice(index, 1)
        }else {
            keys = [...keys, ...value]
        }
        this.setState({
            expandedKeys: keys
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.headerBox}>
                    <View style={styles.header}>
                        <Text style={styles.headerTxt}>邀请记录</Text>
                    </View>
                    <View style={styles.cardMain}>
                        <View style={styles.userCardItem}>
                            <Text style={styles.c3}>{this.props.inviteStore.inviteStatistics.depositsum}</Text>
                            <Text style={styles.userTxtTit}>总邀请数</Text>
                        </View>
                        <View style={styles.userCardItem}>
                            <Text style={styles.c1}>{this.props.inviteStore.inviteStatistics.accumulated}</Text>
                            <Text style={styles.userTxtTit}>累计收益</Text>
                        </View>
                        <View style={styles.userCardItem}>
                            <Text style={styles.c1}>{this.props.inviteStore.inviteStatistics.yesterday_income}</Text>
                            <Text style={styles.userTxtTit}>昨日收益</Text>
                        </View>
                    </View>
                    <View style={styles.invite}>
                        <TouchableOpacity onPress={this._goInvite}>
                            <Text style={styles.c2}> <Icon.Entypo name='add-user'></Icon.Entypo> 去邀请 </Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.resultContainer}>
                    {
                        this.props.inviteStore.inviteTree.length === 0 ?
                        <View style={{
                            display:'flex',
                            justifyContent:'flex-start',
                            alignContent:'center',
                            alignItems:'center',
                            height: '100%'
                        }}>
                            <Image source={require('../assets/images/kong.png')} style={{width:400 ,height: 400}}></Image>
                        </View>
                        :
                        <ScrollView>
                            <Tree 
                                onSelect={this._onSelect }   
                                treeData={this.props.inviteStore.inviteTree}
                                showLine={true} 
                                expandedKeys={this.state.expandedKeys}
                                onExpand={this._onExpand}
                                style={styles.treeStyle}
                            /> 
                        </ScrollView>
                    }
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
	container:{
		flex: 2,
		display: 'flex',
		justifyContent:'space-between',
        flexDirection:'column',
        backgroundColor:"#F5F5F5"
    },
    header:{
        width: '100%',
        display:'flex',
        alignItems: 'center',
        backgroundColor:'#FF7F4B',
		paddingTop: 41,
        height:128
    },
    headerTxt:{
        color:'#FFFFFF',
        fontSize: 18,
    },
    cardMain:{
        marginTop: -35,
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',
        borderColor: '#BBBBBB',
        borderWidth: 1,
        borderRadius: 8,
        height: 100,
        backgroundColor: '#ffffff',
        display:'flex',
        justifyContent:'space-between',
        alignItems:'center',
        flexDirection:'row'
    },
    userCardItem:{
        alignItems:'center',
        width: '33.33%',
        textAlign:'center'
    },
    c3:{
        color:'#E51C23',
        fontSize: 14
    },
    c2:{
        color:'#FF7F4B',
        fontSize: 14
    },
    c1:{
        color:'#101010',
        fontSize: 14
    },
    userTxtTit:{
        color:'#101010',
        fontSize: 14,
        marginTop: 10
    },
    invite:{
        display:'flex',
        justifyContent:'flex-end',
        alignItems:'flex-end',
        marginTop: 10 
    },
    headerBox:{
        backgroundColor:'#ffffff',
        paddingBottom: 10,
        marginBottom: 10,
    },
    result:{
        // paddingBottom: 20
    },
    treeStyle:{
        flex: 1,
        // height:600
    },
    resultContainer:{
        flex: 1,
        backgroundColor:'#ffffff',
    }
});
export default withNavigationFocus(InvitationScreen);